<template>
    <div class="box">
        <div class="outer">
            <el-page-header @back="goBack" content="登录用户"></el-page-header>
            <div class="blank"></div>
            <label>
                <p>用户名</p>
                <el-input placeholder="请输入用户名" v-model="user_name" clearable>
                </el-input>
            </label>
            <div class="blank"></div>
            <label>
                <p>密码</p>
                <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
            </label>
            <div class="blank"></div>
            <div class="sub">
                <el-button type="primary" @click="login">登录</el-button>
            </div>
        </div>
    </div>
</template>

<script>

import { PageHeader, Input, Button } from 'element-ui'

export default {
    data() {
        return {
            user_name: "",
            password: ""
        }
    },
    methods: {
        goBack() {
            // console.log('go back');
            this.$router.back()
        },
        async login() {
            let obj = {
                user_name: this.user_name,
                password: this.password,
                routerT: this.$router
            }
            this.$store.dispatch("runLogin", obj)
        }
    },
    components: {
        "el-input": Input,
        "el-page-header": PageHeader,
        "el-button": Button
    }
}
</script>

<style lang="scss" scoped>
.el-page-header /deep/ .el-page-header__title {
    font-size: 18px;
}

.box {
    background-color: rgb(176, 200, 255);
    height: 100%;
}

.outer {
    margin-top: 200px;
    width: 500px;
    margin: 0 auto;
    background-color: beige;
    position: relative;
    top: 200px;
    padding: 50px 100px 50px 50px;
    border-radius: 15px;
}

.blank {
    height: 50px;
}

.outer {
    p {
        width: 150px;
        font-size: 18px;
    }

    label {
        display: flex;
    }
}

.sub {
    display: flex;
    justify-content: center;
}
</style>